【VSCode】Macで文章作成中に制御文字（0x08）が勝手に混ざるので、とりあえず対策した

はじめに

サーバーレス開発部の藤井元貴です。艦これローソンコラボにD敗北しました。3月にロッピーで申し込もうと思います。

Macで文章作成中に制御文字（0x08）が勝手に混ざる

MacのVSCodeでMarkdownなどの文章を作成していると、「制御文字（0x08）が混ざる」という現象に稀によく遭遇します。

Markdownの章や表がうまく認識されなかったり、他のOSやアプリで開くと豆腐になったりします。 お客様へ提出する資料に混入される場合もあるため、非常に厄介です。

「全角文字を1文字変換中、確定せずDeleteキーで削除する」と発生する模様です。（おそらく） （プレビュー機能を使用中、という条件もあるかもしれません。）

VSCode(macOS)で文章作成、特にMarkdownを書いている方は、一度確認したほうが良いかもしれません。

私が先程まで書いていたMarkdownの資料を見ると、29ヶ所ありました。多すぎ……！

Markdownの認識が失敗する現象例

豆腐が表示される現象例

原因など

GitHubのIssuesにもありますが、まだ解決はしていません。

• Using IME with markdown preview enabled, press ESC/BACKSPACE leads in control characters #37114

そこで

下記のサイトを参考に、「制御文字を強調表示」することで、この問題を気づけるようにしました。

• Visual Studio Code で制御文字が混ざる問題

「制御文字を強調表示」してみた

下記のようにしてみました。

気づくことが大事なので、かなり目立つようにしてみました。 （強調表示の横幅が、1文字より大きい……）

環境

Google日本語入力は、「ばーじょん」で変換するとバージョンが表示されました。

制御文字を強調表示する手順

拡張機能のインストール

下記の拡張機能をインストールします。

• Whitespace+

Whitespace+の動作確認

まずはVSCodeのコマンドパレットでwhitespaceと入力し、whitespace+ Toggleを選択します。

そうすると下記のようにデフォルト設定の制御文字が表示されます。

Whitespace+の設定

デフォルトだと「半角空白」や「改行コード」も強調表示されるため、これらを除外します。

VSCodeのコマンドパレットでwhitespaceと入力し、whitespace+ Configを選択します。

すると、config.jsonが開くため、この内容を変更します。

先程の参考サイトを参考に、下記のように変更しました。

{
    "mode": "all",
    "autoStart": true,
    "refreshRate": 100,
    "elements":
    [{
        "name": "space",
        "enabled": false,
        "pattern": "\\s",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(117, 141, 203, 0.3)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    },{
        "name": "tab",
        "enabled": false,
        "pattern": "\\t",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(170, 53, 53, 0.3)",
                "borderColor": "rgba(170, 53, 53, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(223, 97, 97, 0.3)",
                "borderColor": "rgba(223, 97, 97, 0.4)"
            }
        }
    },{
        "name": "newline",
        "enabled": false,
        "pattern": "\\n",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "borderColor": "rgba(38, 150, 38, 0.3)"
            },
            "dark": {
                "borderColor": "rgba(85, 215, 85, 0.4)"
            }
        }
    },{
        "name": "trailing",
        "enabled": "unlessCursorAtEndOfPattern",
        "pattern": "[^\\S\\r\\n]+$",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(117, 141, 203, 0.3)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    },{
        "name": "control",
        "enabled": true,
        "pattern": "[\\cA-\\cH\\cK-\\cL\\cN-\\cZ\\u001B-\\u001F\\u007F]+",
        "style": {
            "borderWidth": "5px",
            "borderRadius": "0px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(255, 0, 0, 0.9)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    }]
}

ポイント

• autoStartをtrueにして、起動時に有効とする
• space/tab/newlineのenabledをfalseにする（たくさん強調されて見づらいため）
• controlブロックを追記する

完成図

このようになります。

分かりやすい！！！

さいごに

仕事で本格的にMacを使い始めましたが、思わぬ罠にハマりました。 今のうちに気づけたので良しとします。

参考

• Backspace can not erase the last one character during Chinese/Japanese IME conversion (macOS) #24981
• Using IME with markdown preview enabled, press ESC/BACKSPACE leads in control characters #37114
• Issue 714771: Two backspaces required to delete last character in webview input
• Visual Studio Code で制御文字が混ざる問題
• Visual Studio Codeでバックスペースに悩まされたら